<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Personleft active="skill"/>
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Memtitle name="技能特长"/>
        <div class="jingyan">
          <div class="mktitle clear">
            <div class="mleft" style="color: #8d8e9c">
              技能/语言/兴趣
            </div>
            <div class="mright">
              <i class="el-icon-plus" @click="skillAdd"></i>
            </div>
          </div>
          <div class="rongyu clear">
            <el-row style="margin: 20px 0;" v-for="(item,index) in SkillList" :key="index">
              <el-col :span="6">{{item.skillName}}</el-col>
              <el-col :span="13"><b>{{item.level}}</b></el-col>
              <el-col :span="5" style="text-align: right;">
                <i class="el-icon-edit" style="padding: 0 10px; font-size: 20px" @click="skillEdit(item.id)"></i>
                <i class="el-icon-delete" style="padding: 0 10px; font-size: 20px"
                   @click="skillDel(item.id)"></i></el-col>

            </el-row>
            <div v-if="SkillList.length == 0 " style="text-align: center;">
              <el-button style="background: #20a2b2; margin: 40px auto; border: 0; width: 200px;"
                         type="primary" @click="skillAdd">添加
              </el-button>
            </div>
          </div>
        </div>
        <div class="jingyan">
          <div class="mktitle clear">
            <div class="mleft" style="color: #8d8e9c">
              证书
            </div>
            <div class="mright">
              <i class="el-icon-plus" @click="certificationAdd"></i>
            </div>
          </div>
          <div class="rongyu clear">
            <el-row style="margin: 20px 0;" v-for="(item,i) in CficateList" :key="i">
              <el-col :span="4">{{item.time}}</el-col>
              <el-col :span="15"><b>{{item.title}}</b></el-col>
              <el-col :span="5" style="text-align: right;">
                <i class="el-icon-edit" style="padding: 0 10px; font-size: 20px"
                   @click="certificationedit(item.id)"></i>
                <i class="el-icon-delete" style="padding: 0 10px; font-size: 20px"
                   @click="certificationDel(item.id)"></i></el-col>

            </el-row>
            <div v-if="CficateList.length == 0 " style="text-align: center;">
              <el-button style="background: #20a2b2; margin: 40px auto; border: 0; width: 200px;"
                         type="primary" @click="certificationAdd">添加
              </el-button>
            </div>
          </div>
        </div>
        <div class="jingyan">
          <div class="mktitle clear">
            <div class="mleft" style="color: #8d8e9c">
              培训经历
            </div>
            <div class="mright">
              <i class="el-icon-plus" @click="addTrain"></i>
            </div>
          </div>
          <div v-for="(item, i) in trainlist" :key="i">
            <div class="xiaotitle clear"><span>{{item.startTime}}-{{item.endTime}}</span><span
              style="color: #999">{{item.title}}</span>
              <div class="workbtn" style="float: right">
                <i class="el-icon-edit" style="padding: 0 10px; font-size: 20px" @click="editTrain(item.id)"></i>
                <i class="el-icon-delete" style="padding: 0 10px; font-size: 20px"
                   @click="delTrain(item.id)"></i>
              </div>
            </div>
            <div class="misoshu">
              <div class="lefts">培训内容</div>
              <div class="rights">{{item.trainingContent}}
              </div>
            </div>
          </div>
          <div v-if="trainlist.length == 0 " style="text-align: center;">
            <el-button style="background: #20a2b2; margin: 40px auto; border: 0; width: 200px;"
                       type="primary" @click="addTrain">添加
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import {
  cvTraningDel,
  getSkillList,
  TrainingList,
  cvCertificationDel,
  CertificateList,
  delSkill
} from '../../assets/js/domains'

export default {
  name: 'PersonSkill',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      SkillList: [],
      CficateList: [],
      trainlist: [],
      user_uid: ''
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  computed: {},
  mounted: function () {
    this.user_uid = localStorage.getItem('md_user_uid')
    this.getpost()
    this.getTrainingList()
    this.getCertificateList()
  },
  methods: {
    onSubmit: function () {
    },
    getTrainingList: function () {
      const _this = this
      TrainingList({ user_uid: this.user_uid }).then(function (res) {
        if (res.code === 200) {
          _this.trainlist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getpost: function () {
      const _this = this
      getSkillList({ user_uid: this.user_uid }).then(function (res) {
        if (res.code === 200) {
          _this.SkillList = res.data
          console.log(res)
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    // 添加技能
    skillAdd: function () {
      this.$router.push({ path: '/skillAdd' })
    },
    skillEdit: function (id) {
      this.$router.push({ path: '/skillAdd', query: { id: id } })
    },
    skillDel: function (id) {
      const _this = this
      this.$confirm('此操作将永久删除该技能/语言/兴趣, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        delSkill({ id: id }).then(function (res) {
          if (res.code === 200) {
            _this.$message({
              type: 'success',
              message: '删除成功!'
            })
            _this.getpost()
          }
        })
      }).catch(function () {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getCertificateList: function () {
      const _this = this
      CertificateList({ user_uid: this.user_uid }).then(function (res) {
        if (res.code === 200) {
          _this.CficateList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    // 添加证书
    certificationAdd: function () {
      this.$router.push({ path: '/skillCertificationAdd' })
    },
    certificationedit: function (id) {
      this.$router.push({ path: '/skillCertificationAdd', query: { id: id } })
    },
    certificationDel: function (id) {
      const _this = this
      this.$confirm('此操作将永久删除该证书, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        cvCertificationDel({ id: id }).then(function (res) {
          if (res.code === 200) {
            _this.getCertificateList()
            _this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // _this.getCertificateList()
          }
        })
      }).catch(function () {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addTrain: function () {
      this.$router.push({ path: '/skillTrain' })
    },
    editTrain: function (id) {
      this.$router.push({ path: '/skillTrain', query: { id: id } })
    },
    delTrain: function (id) {
      const _this = this
      this.$confirm('此操作将永久删除该培训经历, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        cvTraningDel({ id: id }).then(function (res) {
          if (res.code === 200) {
            _this.$message({
              type: 'success',
              message: '删除成功!'
            })
            _this.getTrainingList()
          }
        })
      }).catch(function () {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
</style>
